<template>
  <div id="bronchialAsthmaForm" class="bronchialAsthmaForm-container">
    <el-form ref="formRef" :rules="rules" :model="form" label-position="top">
      <radio-form
        v-model="form.attr1"
        prop="attr1"
        :disabled="diasble"
        title="1. 精神意识改变"
        :items="[
          { label: '0', value: '无(轻~中度)' },
          { label: '1', value: '焦虑，烦躁，嗜睡或意识不清(重度)' },
        ]"
        @click="radiosClick(1)"
      ></radio-form>
      <radio-form
        v-model="form.attr2"
        prop="attr2"
        :disabled="diasble"
        title="2. 血氧饱和度(吸空气)"
        :items="[
          { label: '0', value: '≥0.92(轻~中度)' },
          { label: '1', value: '＜0.92(重度)' },
          // { label: '0', value: '0.9~0.94(轻~中度)' },
          // { label: '1', value: '0.90(重度)' },
          // { label: '2', value: '＜0.90(危重度)' },
        ]"
        @click="radiosClick(2)"
      ></radio-form>
      <radio-form
        v-model="form.attr3"
        prop="attr3"
        :disabled="diasble"
        title="3. 说话方式"
        :items="[
          { label: '0', value: '能成句(轻~中度)' },
          { label: '1', value: '说单字(重度)' },
        ]"
        @click="radiosClick(3)"
      ></radio-form>
      <radio-form
        v-model="form.attr4"
        prop="attr4"
        :disabled="diasble"
        title="4. 脉搏(次/min)"
        :items="[
          {
            label: '0',
            value: '≤200次/min（0~3岁）≤180次/min（4~5岁)(轻~中度)',
          },
          { label: '1', value: '>200次/min（0~3岁）>180次/min（4~5岁）(重度)' },
        ]"
        @click="radiosClick(4)"
      ></radio-form>
      <radio-form
        v-model="form.attr5"
        prop="attr5"
        :disabled="diasble"
        title="5. 紫绀"
        :items="[
          { label: '0', value: '无(轻~中度)' },
          { label: '1', value: '可能存在(重度)' },
        ]"
        @click="radiosClick(5)"
      ></radio-form>
      <radio-form
        v-model="form.attr6"
        prop="attr6"
        :disabled="diasble"
        title="6. 哮鸣音"
        :items="[
          { label: '0', value: '存在' },
          { label: '1', value: '减弱甚至消失' },
        ]"
        @click="radiosClick(6)"
      ></radio-form>
    </el-form>
    <div class="footer" v-if="isSumbit">
      <!-- <el-button v-print="printObj" disabled>打印筛查表</el-button> -->
      <!-- <el-button type="primary" @click="onSubmit(form)">保存</el-button> -->
      <debouncebtn
        class="footer-button"
        type="primary"
        @debounce="onSubmit(form)"
      >
        保存
      </debouncebtn>
    </div>
  </div>
</template>
<script>
  import radioForm from '@/components/RadioForm'
  import {
    ref,
    reactive,
    onBeforeMount,
    computed,
    defineExpose,
    toRefs,
    watch,
  } from 'vue'
  import { queryInfo, save } from '@/api/modules/reception.js'
  import { ElMessage } from 'element-plus'
  import debouncebtn from '@/components/DebounceBtn'
  import { getAllTime } from '@/utils/timeTools'
  import { isHas } from '../../../../utils/validate'
  export default {
    components: { radioForm, debouncebtn },
    name: 'bronchialAsthmaForm',
    emits: ['success'],
    props: {
      id: Number,
      pid: Number,
      showType: String,
      isDialog: Boolean,
      initData: Object,
      emrId: [String, Number],
      recordDate: String,
    },
    data() {
      return {
        isShow: true,
        printObj: {
          id: 'bronchialAsthmaForm',
          preview: false,
          previewTitle: '点击下方按钮进行打印',
          popTitle: '儿童哮喘与过敏性疾病筛查表',
          // extraCss: require('@/styles/asthmaAndAllergicForm.css'),
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        },
      }
    },
    setup(props, context) {
      let day = ref(null)
      let label = ref(label)
      let checkLable = ref([])
      const print = function () {}
      // 表单相关
      // 表单相关
      const form = reactive({
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        attr5: null,
        attr6: null,
      })
      const formRef = ref(null)
      const { id, isDialog, emrId, recordDate } = toRefs(props)
      const rules = {
        attr1: [{ required: false, message: '请选择', trigger: 'change' }],
        attr2: [{ required: false, message: '请选择', trigger: 'change' }],
        attr3: [{ required: false, message: '请选择', trigger: 'change' }],
        attr4: [{ required: false, message: '请选择', trigger: 'change' }],
        attr5: [{ required: false, message: '请选择', trigger: 'change' }],
        attr6: [{ required: false, message: '请选择', trigger: 'change' }],
      }
      const onSubmit = function () {
        formRef.value.validate((valid) => {
          if (valid) {
            if (
              isHas(form.attr1) ||
              isHas(form.attr2) ||
              isHas(form.attr3) ||
              isHas(form.attr4) ||
              isHas(form.attr5) ||
              isHas(form.attr6)
            ) {
              form['patientId'] = props.pid
              form['screeningType'] = 2
              form['childType'] = props.showType
              if (props.emrId) form['emrId'] = emrId.value
              if (recordDate.value) {
                form['recordDate'] = getAllTime(recordDate.value)
              }
              const params = { ...form }
              // 二次提交为什么变成了string
              form.value = {
                attr1: null,
                attr2: null,
                attr3: null,
                attr4: null,
                attr5: null,
                attr6: null,
              }
              save(params).then((res) => {
                const { message, id } = res.data
                ElMessage.success(message)
                context.emit('success', id)
              })
              return
            } else {
              ElMessage.warning('至少填一项!')
            }
          } else {
            ElMessage.warning('请填写完毕')
          }
        })
      }

      // 初始化相关
      const diasble = ref(false)
      const resData = ref(null)

      onBeforeMount(() => {
        console.log('bronchialAsthmaForm')
        if (id.value) {
          // 是查看
          diasble.value = isDialog.value ? false : true
          loadData({ id: id.value, emrId: emrId.value })
        }
        if (isDialog.value) {
          diasble.value = props.initData ? true : false
        }
      })
      const loadData = async function (params) {
        resData.value = null
        const res = await queryInfo(params)
        resData.value = res.data
        // initForm(resData.value)
        if (!props.initData) initForm(resData.value)
      }

      watch(
        () => props.initData,
        (val) => {
          console.log('switchChange 4')
          // 有默认值就用默认值，没有再用网络值，达到切换效果
          if (val) {
            diasble.value = true
            initForm(val)
          } else {
            diasble.value = false
            initForm(resData.value)
          }
        },
        { immediate: true, deep: true }
      )
      function initForm(val) {
        if (val) {
          Object.keys(val).forEach((item) => {
            if (form[item] !== undefined) {
              form[item] = val[item] + ''
            }
          })
        } else {
          Object.keys(form).forEach((item) => {
            form[item] = null
          })
        }
      }
      const isSumbit = computed(() => {
        if (props.isDialog === true) {
          return false
        } else {
          return !diasble.value
        }
      })
      defineExpose({ onSubmit })
      function radiosClick(index) {
        if (props.initData)
          context.emit('scrollEvent', `bronchialAsthmaForm${index}`)
      }
      return {
        day,
        label,
        checkLable,
        print,
        onSubmit,
        form,
        diasble,
        rules,
        formRef,
        isSumbit,
        radiosClick,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .bronchialAsthmaForm-container {
    padding: 0px 22px;
    .input {
      display: inline-block;
      width: 50px;
      :deep(.el-input__inner) {
        border-radius: 0;
        border: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none !important;
        border-bottom: 1px solid #d9d9d9;
        vertical-align: middle;
        height: 30px;
        font-size: 17px;
        text-align: center;
      }
    }
    .footer {
      margin-top: 5px;
      display: flex;
      justify-content: flex-end;
    }
  }
  //一定全局定义样式
  @media print {
    //打印的样式
    #frames {
      // width: 100%;
      // height: calc(100vh - 220px);
    }
  }
</style>
